<template>
	<view>
		<view class="flex align-center">
			<view class="search-wrap" v-if="!entering" @click="changeEnter">
				<image src="/static/img/search-gray.png" class="search-icon" mode=""></image>
				<view class="search-tip">
					请输入关键词
				</view>
			</view>
			<view class="search-wrap" v-if="entering">
				<view class="inputs-wrap">
					<input type="text" v-model="searchs" class="inputs" @input="searchInput" :focus="entering" confirm-type="search" @confirm="searchInput" placeholder="请输入关键词"/>
				</view>
				<view class="del-wrap" @click="del" v-if="searchs">
					<image src="/static/img/del-gray.png" class="del" mode=""></image>
				</view>
			</view>
			<view class="p-l-10" @click="clickTime" v-if="timeChoose">
				<uni-icons :type="showTime?'arrowup':'arrowdown'" size="22" color="#666666"></uni-icons>
			</view>
		</view>
		
		<view class="p-t-10 flex " v-if="showTime&&timeChoose">
			<view class="p-r-5 " v-if="statusArr&&statusArr.length > 0">
				<view class=" flex align-center position-rel" @click.stop="hidClick()">
					<view class=" status-title">
						{{statusName}}
					</view>
					
					<view class="show-hid" v-if="showHid">
						<view class="text-center p-t-6 p-b-6" v-for="(item,index) in statusArr" :key="index" @click.stop="changeStatusArr(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-space-around position-rel flex-1 p-r-15" v-if="showTime&&timeChoose">
				<view class="">
					<picker mode="date" :value="sTime" fields="day" @change="bindSTime" class="flex">
						<view class="black-9">
							{{sTime?sTime:'选择开始时间'}}
						</view>
					</picker>
				</view>
				---
				<view class="">
					<picker mode="date" :value="eTime" fields="day" @change="bindeTime" class="flex">
						<view class="black-9">
							{{eTime?eTime:'选择结束时间'}}
						</view>
					</picker>
				</view>
				<view class="del-wrap del-time" @click="delTime" v-if="sTime || eTime">
					<image src="/static/img/del-gray.png" class="del" mode=""></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchs:'',
				entering:false,
				sTime:'',
				eTime:'',
				showTime:true,
				statusName:'全部',
				showHid:false,
				
			};
		},
		name: 'search-cli',
		props:{
			timeChoose: {//是否显示选择时间
				type: [Boolean, String],
				default: false
			},
			statusArr:{
				type: Array,
				default(){
					return []
				}
			}
		},
		mounted() {
			this.$emit('showTimes',true);
		},
		methods: {
			hidClick(){
				this.showHid = !this.showHid;
			},
			changeStatusArr(item){
				this.showHid = false;
				this.statusName = item;
				this.$emit('statusName',this.statusName);
			},
			clickTime(){
				this.showTime = !this.showTime;
				this.$emit('showTimes',this.showTime);
			},
			changeEnter(){
				this.entering = true;
			},
			searchInput(e){	
				// if(this.searchs == '')return;
				console.log(e);
				this.searchs = e.detail.value;
				console.log(this.searchs);
				setTimeout(()=>{
					this.$emit('searchInput',this.searchs);
				},300);
			},
			del(){
				if(this.searchs == '')return;
				this.searchs = '';
				setTimeout(()=>{
					this.$emit('del',this.searchs);
				},100);
				
			},
			delTime(){
				this.sTime = '';
				this.eTime = '';
				this.$emit('delTime','');
			},
			bindSTime(e){
				console.log(e);
				this.sTime = e.target.value;
				if(this.eTime){
					let sTime = this.formatTimes(this.sTime);
					let eTime = this.formatTimes(this.eTime);
					if(sTime > eTime){
						this.sTime = '';
					}
				}
				setTimeout(()=>{
					this.$emit('bindSTime',this.sTime);
				},100);
			},
			bindeTime(e){
				console.log(e);
				this.eTime = e.target.value;
				if(this.sTime){
					let sTime = this.formatTimes(this.sTime);
					let eTime = this.formatTimes(this.eTime);
					if(sTime > eTime){
						this.eTime = '';
					}
				}
				setTimeout(()=>{
					this.$emit('bindeTime',this.eTime);
				},100);
			},
			formatTimes(times){
				times = times.replace(/-/g,'/');
				return new Date(times).getTime();
			},
		}
	}
</script>

<style lang="less">
	.search-wrap{
		background: #F5F5F9;
		height: 80upx;
		display: flex;
		align-items: center;
		// justify-content: center;
		width: 100%;
		border-radius: 40upx;
		padding: 10upx 20upx;
		.search-icon{
			width: 40upx;
			height: 40upx;
			margin-right: 10upx;
		}
		.search-tip{
			color: #C7C7C7;
		}
		
		.inputs-wrap{
			flex: 1;
			padding-left: 10upx;
			padding-right: 30upx;
			.inputs{
				font-size: 30upx;
				width: 100%;
			}
		}
		
	}
	.del-wrap{
		width: 50upx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: none;
		.del{
			width: 32upx;
			height: 32upx;
		}
	}
	.del-time{
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
	.status-title{
		padding: 0upx 20upx;
		// box-shadow: 0px 4upx 8upx #999;
		border-radius: 6upx;
		background: #529EFF;
		color: #fff;
		font-size: 26upx;
		min-width: 180upx;
		text-align: center;
	}
	.show-hid{
		width: 190upx;
		box-shadow: 0px 4upx 8upx #999;
		border-radius: 10upx;
		background: #fff;
		position: absolute;
		// bottom: -148upx;
		top: 42upx;
		left: 0upx;
		font-size: 26upx;
		color: #333;
		z-index: 10;
	}
</style>
